<template>
  <div class="content-bottom">
    <div class="card-item">
      <div class="card-title">
        一般公共预算支出结构
      </div>
      <div class="card-main">
        <button v-if="publicDetailPieConfig.option.series[0].data.length > 9" class="publicOutcomeDetail" @click="showDialog">查看详情</button>
        <!--  -->
        <common-pieNew-chart ref="publicPie" :config='publicPieConfig'></common-pieNew-chart>
        <!--  -->
        <div v-if="isShowDialog" class="detail-dialog">
          <div class="dialog-title">一般公共预算支出结构</div>
          <div class="close-btn" @click="isShowDialog = false">X</div>
          <common-pieNew-chart ref="publicDetailPie" :config='publicDetailPieConfig'></common-pieNew-chart>
        </div>
      </div>
    </div>
    <div class="key-expend-wrap">
        <div class="card-title">重点支出科目</div>
        <div class="expeng-main">
          <common-bar-chart ref="keyExpend" :config="keyExpendConfig"></common-bar-chart>
        </div>
    </div>

  </div>
</template>
<script>
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import CommonBarChart from '@/components/common/common-bar-chart.vue';
  import CommonTable from "@/components/common/common-table.vue";
  import { getPublicOutcomeDetail } from "@/network/adaptor.js";

  import autoScroll from '@/util/autoScroll.js';

  export default {
    name: 'content-bottom',
    components: {
        CommonPieNewChart,
        CommonBarChart,
        CommonTable
    },
    data() {
      return {
        isShowDialog: false,
        zhu_fang_ji_jin:{},
        publicPieConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            title: '',
            id: 'b-publicPie',
            color: ['#3EA2FE', '#6C43F7', '#EDA652', '#77F7E7', '#FDD100', '#4BC89B'],
            series: [{
              name: '',
              type: 'pie',
              radius: [30, 80],
              center: ['50%', '50%'],
              label: {
                formatter: '{b}\n{d}%',
                fontSize: 16
              },
              data: []
            }]
          }
        },
        publicDetailPieConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            title: '',
            id: 'b-publicDetailPie',
            color: ['#3EA2FE', '#6C43F7', '#EDA652', '#77F7E7', '#FDD100', '#4BC89B'],
            series: [{
              name: '',
              type: 'pie',
              radius: [40, 140],
              center: ['50%', '50%'],
              label: {
                formatter: '{b}\n{d}%',
                fontSize: 16
              },
              data: []
            }]
          }
        },
        keyExpendConfig: {
            request: {
                url: "url",
                params: {}
            },
            option:{
                id:'keyExpendBar',
                xAxis:[],
                y:[{
                    axis:{
                        min:null,
                        max:null
                    },
                    title:'万元',
                    data:[],
                    color:{
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#5531D4' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#7A18DE' // 100% 处的颜色
                        }],
                    },
                    stack:'1'
                }]
            }
        },
        housingNumbersConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            height: 140,
            tableColor: '#6BEEFF',
            tableHeader: [{
              prop: "project",
              title: "预算科目",
            }, {
              prop: "budget",
              title: "年度预算数",
            }, {
              prop: "total",
              title: "累计数",
            }, {
              prop: "percent",
              title: "年度预算完成量",
            }],
            tableData: [{
              project: '个人所得税(60％)',
              budget: '14293',
              total: '13574',
              percent: '87％'
            }, {
              project: '增值税(75％)',
              budget: '14293',
              total: '13574',
              percent: '87％'
            }, {
              project: '消费税(65％)',
              budget: '14293',
              total: '13574',
              percent: '87％'
            }, {
              project: '印花税(125％)',
              budget: '14293',
              total: '13574',
              percent: '87％'
            }, {
              project: '土地增值税(95％)',
              budget: '14293',
              total: '13574',
              percent: '87％'
            }]
          }
        },
      }
    },
    mounted() {
        // this.$refs.housingNumbers.initTable();

        this.initPublicAndExpend();
        this.getIncomeDetail();

        
    },
    methods:{
      initPublicAndExpend() {
        getPublicOutcomeDetail().then(res => {
          this.publicPieConfig.option.series[0].data = this.orderPieList(res.pie);
          this.publicDetailPieConfig.option.series[0].data = res.pie;

          this.keyExpendConfig.option.xAxis = res.strip.titles;
          this.keyExpendConfig.option.y[0].data = res.strip.values;

          this.$refs.publicPie.initChart();
          this.$refs.keyExpend.initChart();
        })
      },
      getIncomeDetail() {
        this.$get(this.$api.getIncomeDetail).then(res => {
          if(res.code == 200) {
            this.zhu_fang_ji_jin = res.data.zhu_fang_ji_jin;
          }
        })
      },
      orderPieList(list) {
        if (list <= 9) {
          return list;
        } else {
          let list_1 = list.slice(0,7);
          let list_2 = list.slice(7,list.length);
          let otherTotal = 0;
          list_2.forEach(element => {
            otherTotal += element.value;
          });

          return list_1.concat([{value:parseFloat(otherTotal.toFixed(2)), name:'其他'}]);
        }
      },
      showDialog() {
        this.isShowDialog = !this.isShowDialog;
        setTimeout(() => {
          this.$refs.publicDetailPie.initChart();
        },300);
      }
    }
  }

</script>
<style lang="scss" scoped>
  .content-bottom {
      margin-top: 20px;
      float: left;
  }
  .card-title {
    padding-left: 17px;
  }

  .key-expend-wrap {
      width: 1250px;
      background: rgba(14,44,74,0.3);
      position: relative;
      float: left;
      margin:0 20px;

      .card-title {
          position: relative;
          padding-left: 17px;
          margin: 0;
          line-height: 54px;
          color: #EAF4FF;
          font-size: 22px;
      }

      .expeng-main {
          height: 386px;
          padding: 20px;
          box-sizing: border-box;
      }
  }

  .key-expend-wrap::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 54px;
      top: 0;
      left: 0;
      background: url('../../../assets/imgs/v2/card-head.png') no-repeat;
  }

  .key-expend-wrap::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0;
      background: url('../../../assets/imgs/card-head.png') no-repeat;
  }

  .card-main {
    position: relative;
    height: 386px;
    padding: 20px;
    box-sizing: border-box;

    .publicOutcomeDetail{
      position: absolute;
      top: -38px;
      right: 20px;
      z-index: 9;
      font-size: 18px;
      color: #fff;
      background: transparent;
      border: none;
      outline: none;
      cursor: pointer;
    }

    .detail-dialog {
      width: 800px;
      height: 600px;
      position: absolute;
      right: -800px;
      top: -600px;
      z-index: 2001;
      background: rgba(14,44,74,0.9);
      >.close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
        z-index: 999;
      }
      >.dialog-title {
        position: absolute;
        left: 15px;
        top: 10px;
        font-size: 22px;
        color: #fff;
      }
    }
  }

  .desc-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .desc-box {
    display: inline-block;

    .desc {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #6BEEFF;
      line-height: 38px;
      text-indent: 0.5em;
    }

    .num {
      width: 275px;
      height: 55px;
      line-height: 55px;
      text-align: center;
      background: url("../../../assets/imgs/v2/income-bg.png") no-repeat;
      background-size: 100%;
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #F6CE12;

      >span {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EAF4FF;
        line-height: 38px;
      }
    }
  }
</style>
